<template>
  <div>
    <application-header
      title="活跃用户分析"
      @getTime="handleGetTime"
      @getChannel="handleGetChannel"
      @getVersion="handleGetVersion"
    />
    <div class="activeUsers-container">
      <div class="activeUsers-tabs">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="活跃趋势">
            <div class="chart-wrapper">
              <line-chart
                name="活跃用户数"
                :height="hourHeight"
                :chartData="chartData"
                xAxisName="时间"
              />
            </div>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="活跃构成">
            <div class="chart-wrapper">
              <line-chart
                name="新增用户占比"
                :height="hourHeight"
                :chartData="chartData"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="周活跃率">
            <div class="chart-wrapper">
              <line-chart
                name="周活跃率"
                :height="hourHeight"
                :chartData="chartData"
              />
            </div>
          </a-tab-pane> -->
        </a-tabs>
        <a-radio-group style="display: none;" v-model="value" @change="onChange">
          <a-radio-button value="a" disabled> 小时 </a-radio-button>
          <a-radio-button value="b"> 天 </a-radio-button>
          <a-radio-button value="c" disabled> 周 </a-radio-button>
          <a-radio-button value="d" disabled> 月 </a-radio-button>
        </a-radio-group>
      </div>
      <el-link
        style="margin-left: 16px"
        @click="changePutAwayStatus"
        type="primary"
        :underline="false"
        >{{ putAwayName }}明细数据<i
          :class="[
            isPutAway ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
            'el-icon--right',
          ]"
        ></i
      ></el-link>
      <div class="activeUsers-tables">
        <a-table
          :pagination="pagination"
          v-if="isPutAway"
          rowKey="id"
          :columns="columns1"
          :data-source="data1"
          @change="onChangePagination"
        ></a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ApplicationHeader from "@/components/ApplicationHeader";
import LineChart from "@/echartsComponent/LineChart.vue";
import { getSelectActiveUserInDay } from "@/api/activeUsers";
import { getYearMonthDayFromOne, getYearMonthDay, getFromDay1ToDay2 } from "@/utils/functions";

const columns1 = [
  {
    title: "日期",
    dataIndex: "date",
  },
  {
    title: "活跃用户数",
    dataIndex: "count",
  },
];

const columns3 = [
  {
    title: "日期",
    dataIndex: "date",
  },
  {
    title: "活跃用户数",
    dataIndex: "activeUsers",
  },
  {
    title: "活跃用户构成（新用户占比）",
    dataIndex: "activeUserComposition",
  },
  {
    title: "用户周活跃率",
    dataIndex: "userWeeklyActivityRate",
  },
];

const data3 = [
  {
    key: "1",
    date: "2021-05-01",
    activeUsers: "text",
    activeUserComposition: "text",
    userWeeklyActivityRate: "text",
  },
];

function onChangePagination(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

export default {
  name: "activeUsers",
  data() {
    return {
      value: "a",
      hourHeight: "350px",
      chartData: {
        xAxisData: [],
        yAxisData: [],
      },
      pagination: {
        pageSize: 10,
        total: 0,
        // showSizeChanger:true,
        // showTotal: total => `共 ${total} 条数据`,
        // pageSizeOptions: ['5', '10', '15', '20'],
        // onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize
      },
      selectActiveUserInDayData: {
        startDate: null,
        endDate: null,
        channel: null,
        version: null,
        appKey: "",
      },
      isPutAway: true,
      data1: [],
      columns1,
      data3,
      columns3,
    };
  },
  components: {
    ApplicationHeader,
    LineChart,
  },
  computed: {
    putAwayName() {
      return this.isPutAway ? "收起" : "展开";
    },
    ...mapGetters(["applicationId"]),
  },
  methods: {
    async handleGetTime(msg) {
      this.selectActiveUserInDayData.startDate = msg[0];
      this.selectActiveUserInDayData.endDate = msg[1];
      await this.getSelectActiveUserInDayData(this.selectActiveUserInDayData);
    },
    async handleGetChannel(msg) {
      this.selectActiveUserInDayData.channel = msg.key;
      await this.getSelectActiveUserInDayData(this.selectActiveUserInDayData);
    },
    async handleGetVersion(msg) {
      this.selectActiveUserInDayData.version = msg.key;
      await this.getSelectActiveUserInDayData(this.selectActiveUserInDayData);
    },
    onChangePagination,
    changePutAwayStatus() {
      this.isPutAway = !this.isPutAway;
    },
    callback(key) {
      console.log(key);
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
    },
    // 折线图 活跃趋势
    async getSelectActiveUserInDayData(data) {
      // 每次请求，清空数据
      this.chartData.xAxisData.length = 0;
      this.chartData.yAxisData.length = 0;
      let res;
      try {
        res = await getSelectActiveUserInDay(data);
      } catch (error) {
        console.log(error);
      }
      let { code } = res;
      if (code == 0) {
        let dataM = getFromDay1ToDay2(this.selectActiveUserInDayData.startDate, this.selectActiveUserInDayData.endDate);
        // 做些什么
        if (res.data.length == 0) {
          dataM.forEach(item => {
            this.chartData.xAxisData.push(item);
            this.chartData.yAxisData.push(0);
          })
          this.data1 = [];
          this.pagination.total = 0;
        } else {
          res.data.forEach((item, index) => {
            item["id"] = index;
          });
          this.data1 = res.data.reverse();
          for(let i = 0; i < dataM.length; i++) {
            let flag = false;
            let index1;
            for(let j = 0; j < res.data.length; j++) {
              if (res.data[j]['date'] == dataM[i]) {
                flag = true;
                index1 = res.data[j]['count']
                break;
              }
            }
            if (flag) {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(index1);
            } else {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(0);
            }
          }
          this.pagination.total = res.data.length;
        }
      }
    },
  },
  async mounted() {
    this.selectActiveUserInDayData.appKey = this.applicationId;
    this.selectActiveUserInDayData.startDate = getYearMonthDayFromOne();
    this.selectActiveUserInDayData.endDate = getYearMonthDay();
    await this.getSelectActiveUserInDayData(this.selectActiveUserInDayData);
  },
};
</script>

<style lang="scss" scoped>
.activeUsers-container {
  margin: 24px 22px 20px;
  padding: 24px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  .activeUsers-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  .activeUsers-tabs {
    position: relative;
    >>> .ant-tabs {
      .ant-tabs-bar {
        border-bottom: none;
        .ant-tabs-nav-container {
          .ant-tabs-nav-wrap {
            .ant-tabs-tab {
              padding: 12px 0;
            }
            .ant-tabs-ink-bar {
              width: 56px;
            }
          }
        }
      }
    }
    >>> .ant-radio-group {
      position: absolute;
      top: 3px;
      right: 0px;
      padding: 4px 0;
      .ant-radio-button-wrapper {
        margin-right: 8px;
      }
    }
    // chart
    .chart-wrapper {
      background: #fff;
      padding: 16px 0 0;
      margin-bottom: 32px;
    }
  }
  .activeUsers-tables {
    margin: 24px auto 16px;
  }
}
</style>

